<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport"        
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我的团队</title>
    <!-- <link rel="stylesheet" href="../public/css/1.css"> -->
    <link rel="stylesheet" href="../public/css/1.css">
    <link rel="stylesheet" href="../public/css/reset.css" />
    <link rel="stylesheet" href="../public/css/all_use.css" />
    <link rel="stylesheet" href="../public/css/footer.css">
    <script src="../public/js/utils/utils.js"></script>
    <!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
</head>
<style>
</style>

<body>
    <div id="app">
        <div class="bianbox">
            <div :class="[choose==0 ? 'quank' : 'dquank']" @click="handle(0)">直推</div>
            <!--<div :class="[choose==1 ? 'quank' : 'dquank']" @click="handle(1)">非直推</div>-->
            <div :class="[choose==2 ? 'quank' : 'dquank']" @click="handle(2)">团队</div>
        </div>
        <div style="padding: 10px;">总共{{dataList.length}}人</div>
        <div v-for="(item,i) in dataList" v-if="dataList.length>0">
            <div class="c">
                <div class="nc" style="display: flex;justify-content: space-around;width: 100%;padding: 10px;border-bottom: 1px solid gray;">
                    <div style="display: flex;">
                        <img :src="item.head" class="tx" style="width: 50px;height: 50px;border-radius: 50px;">
                        <div style="display: flex;flex-direction: column;margin-left: 20px;">
                            <div class="wz">{{item.nickname}}</div>
                            <div class="wz" style="font-size: 12px;margin-top:6px;">{{item.flag==1?"普通会员":item.flag==2?"代理商":"运营商"}}</div>
                        </div>
                    </div>
                    <div style="padding: 10px">
                        <button type="success" @click="next(item.id)">下级</button>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="dataList.length==0">
            <div style="display: flex;justify-content: center;">暂无数据</div>
        </div>
        <van-dialog v-model="show" title="下级" show-cancel-button="true" confirm-button-text="关闭"
            confirm-button-color="#11BD10" @confirm="close">
            <div style="padding: 10px;">总共{{dataListNext.length}}人</div>
            <div v-for="(item,i) in dataListNext" v-if="dataListNext.length>0">
                <div class="c">
                    <div class="nc" style="display: flex;width: 100%;padding: 10px;border-bottom: 1px solid gray;">
                        <img :src="item.head" class="tx" style="width: 50px;height: 50px;border-radius: 50px;">
                        <div style="display: flex;flex-direction: column;margin-left: 20px;">
                            <div class="wz">{{item.nickname}}</div>
                            <div class="wz" style="font-size: 12px;margin-top:6px;">{{item.flag==1?"普通会员":item.flag==2?"代理商":"运营商"}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="dataListNext.length==0">
                <div style="display: flex;justify-content: center;">暂无数据</div>
            </div>
        </van-dialog>
    </div>

</body>
<script type="module">
    import ajax from "../public/js/api/api.js";
    import telJudge from "../public/js/utils/telJudge.js";
    var app = new Vue({
        el: '#app',
        data: {
            showq: false,
            show: false,
            message: [],
            inde: 0,
            text: '',
            choose: 0,
            flag: '',
            dataList: [],
            dataListNext: [],
            label: '',
            details: '',
            payMoney: '',
            account: {},
            typelist: [],
            id: "",//商品id
        },

        created() {
            this.findTeam();
        },
        methods: {
            next(id){
                this.findTeamNext(id);
            },
            handle(id) {
                this.choose = id
               this.findTeam();
            },
            findTeam(){
                ajax
                    .findTeam({
                        choice: this.choose,
                        page: 0
                    })
                    .then((res) => {
                        console.log(res.data.data,"-----888---");
                        if (res.data.code == 0) {
                            this.dataList = res.data.data
                        }
                    })
            },
            findTeamNext(id){
                ajax
                    .findTeamNext({
                        choice: id
                    })
                    .then((res) => {
                        console.log(res.data.data,"-----888---");
                        if (res.data.code == 0) {
                            this.dataListNext = res.data.data
                            this.show=true;
                        }
                    })
            },
            close(){
            this.show=false;
            },
        }
    })
</script>

</html>